<template>
  <a-layout style="height:100%;">
    <div v-if="store.state.sys.loading" style="position: fixed;left:0;right:0;top:0;bottom:0;z-index: 10000;">
      <div style="position:absolute;z-index:1;width:100%;height:100%;background: rgba(255,255,255,0.6)"></div>
      <a-spin size="large"
              style="position: absolute;z-index:2;left:50%;top:50%;transform: translateY(-50%) translateX(-50%)"/>
    </div>
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible style="width:256px;">
      <div class="logo"/>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <menu-item v-for="m of menuList" :menu="m">
        </menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0;display: flex;">
        <div class="header-left">
          <menu-unfold-outlined
              v-if="collapsed"
              class="trigger"
              @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)"/>
          <a-breadcrumb style="display: inline;">
            <a-breadcrumb-item v-for="title of store.state.tab.breadTitles">{{ title }}</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <div class="header-right">
          <div class="header-right-username">
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                {{ userInfo?.nickname }}
                <DownOutlined/>
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0" @click="toPersonal">
                    <span>个人中心</span>
                  </a-menu-item>
                  <a-menu-item key="1" @click="logout">
                    <span>登出</span>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div class="header-right-img">
          </div>
        </div>
      </a-layout-header>
      <a-layout-content
          :style="{ margin: '16px 16px', padding: '0', background: '#fff', minHeight: '280px' }"
      >
        <div style="height: 100%;overflow: hidden;">
          <div style="background: #f0f2f5;height:100%;">
            <a-tabs class="_center-tabs" v-model:activeKey="store.state.tab.activeTabKey" type="editable-card" hide-add
                    size="small"
                    @change="handleTabChange" @edit="onTabEdit"
                    style="margin-bottom: 0;height:100%;">
              <a-tab-pane style="height:100%;" key="/index" tab="首页" :closable="false">
                <div style="padding:24px;height:100%;overflow: auto;background-color: #fff;">
                  <Index/>
                </div>
              </a-tab-pane>
              <a-tab-pane style="height:100%;" v-for="tab of store.state.tab.tabs" :key="tab.path" :tab="tab.title">
                <div style="padding:24px;height:100%;overflow: auto;background-color: #fff;">
                  <component v-if="tab.menuType==='page'" :is="tab.component"/>
                  <iframe style="width:100%;height:99%;border:none;" v-if="tab.menuType==='link'" :src="tab.linkUri"></iframe>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
          <!--          <div style="padding:24px;flex-grow: 1;overflow: auto;">-->
          <!--            <router-view v-slot="{ Component }">-->
          <!--              <keep-alive>-->
          <!--                <component :is="Component"/>-->
          <!--              </keep-alive>-->
          <!--            </router-view>-->
          <!--</div>-->
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script setup>

import {computed, ref} from "vue";
import {useStore} from "vuex";
import MenuItem from "@/views/system/menuItem.vue";
import request from "@/util/request.js";
import router from "@/router";
import Index from "@/views/index.vue";

let store = useStore()
let userInfo = store.state.user.userInfo
let selectedKeys = ref([])
let collapsed = ref(false)
let menuList = store.state.user.menuList

function logout() {
  //登出系统
  request({
    method: 'get',
    url: '/api/logout',
  }).then((res) => {
    //登出成功
    let data = res;
    if (data.code === 200) {
      store.dispatch("user/logout");
      router.replace({path: "/login"})
    }
  });
}

function toPersonal() {
  router.replace({path: "/me"})
}

function handleTabChange() {
  router.replace({path: store.state.tab.activeTabKey})
}

function onTabEdit(targetKey) {
  store.commit('tab/removeTab', targetKey);
}

let avatarUrl = computed(() => {
  return store.state.user.avatarUrl
})
</script>
<style scoped lang="scss">
//:deep {
//  .ant-tabs-nav {
//    margin-bottom: 0;
//  }
//}

:deep(.ant-tabs-nav) {
  margin-bottom: 0 !important;
}

:deep(.ant-layout-content) {
  margin-top: 2px !important;
}

:deep(.ant-tabs-tab-active) {
  //background-color: #FFF !important;
}

:deep(._center-tabs .ant-tabs-content) {
  height: 100%;
}

.trigger {
  font-size: 18px;
  line-height: 50px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.ant-layout-header {
  height: 50px;
  line-height: 50px;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.3);
  margin: 16px;
}

.site-layout-background {
  background: #fff;
}

.header-left {
  flex-grow: 1;
}

.header-right {
  height: 100%;
  padding-right: 40px;
  width: 150px;
  flex-grow: 0;

  .header-right-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
    float: right;
    background-image: v-bind(avatarUrl);
    background-repeat: round;
    margin-top: 5px;
  }

  .header-right-username {
    height: 50px;
    float: right;
    margin-left: 10px;
  }
}

</style>
